<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>麻将</title>
<style>
	.beijing{
	width:450px;
	height:600px;
	display:flex; 
	flex-wrap: wrap;
	justify-content: space-around; 
	background-color: green;
}
.box{
	width:120px;
	height:170px;
	background-color: #FFFFFF;
    border-radius: 10%; 
    margin: auto;
}
	.yi{
		height:80px;
		width:80px;
		background-color:red;
	    border-radius:50%; 
		margin:45px auto;	 
	}
	
	.er{}
    .er span{
	display: block;
	width:50px;
	height:50px;
	background-color:blue;
	border-radius:50%;
   }
 .er span:nth-child(1){
	transform: translate(37px,20px);
 }
 .er span:nth-child(2){
	transform: translate(37px,40px);
 } 
	.san1{}
    .san1 span{
	display: block;
	width:50px;
	height:50px;
	background-color:blue;
	border-radius:50%;
   }
	.san2{}
	 .san2 span{
	display: block;
	width:50px;
	height:50px;
	background-color:red;
	border-radius:50%;
   }
	.san3{}
	 .san3 span{
	display: block;
	width:50px;
	height:50px;
	background-color:green;
	border-radius:50%;
   }
 .san1 span:nth-child(1){
	transform: translate(2px,2px);
 }
 .san2 span:nth-child(1){
	transform: translate(34px,13px);
 } 
 .san3 span:nth-child(1){
	transform: translate(67px,17px);
 } 
	
	.si1{}
    .si1 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
	.si2{}
	 .si2 span{
	display: block;
	width:42px;
	height:42px;
	background-color:blue;
	border-radius:50%;
   }
	.si3{}
	 .si3 span{
	display: block;
	width:42px;
	height:42px;
	background-color:blue;
	border-radius:50%;
   }
	.si4{}
	 .si4 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
 .si1 span:nth-child(1){
	transform: translate(10px,30px);
 }
 .si2 span:nth-child(1){
	transform: translate(10px,45px);
 } 
 .si3 span:nth-child(1){
	transform: translate(65px,-55px);
 } 
.si4 span:nth-child(1){
	transform: translate(65px,-40px);
 } 
	
	.wu1{}
    .wu1 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
	.wu2{}
	 .wu2 span{
	display: block;
	width:42px;
	height:42px;
	background-color:blue;
	border-radius:50%;
   }
	.wu3{}
	 .wu3 span{
	display: block;
	width:42px;
	height:42px;
	background-color:blue;
	border-radius:50%;
   }
	.wu4{}
	 .wu4 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
	.wu4{}
	 .wu4 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
	.wu5{}
	 .wu5 span{
	display: block;
	width:42px;
	height:42px;
	background-color:red;
	border-radius:50%;
   }
 .wu1 span:nth-child(1){
	transform: translate(10px,20px);
 }
 .wu2 span:nth-child(1){
	transform: translate(10px,65px);
 } 
 .wu3 span:nth-child(1){
	transform: translate(65px,-64px);
 } 
.wu4 span:nth-child(1){
	transform: translate(65px,-20px);
 } 
.wu5 span:nth-child(1){
	transform: translate(40px,-105px);
 } 
	
	.liu1{}
    .liu1 span{
	display: block;
	width:42px;
	height:42px;
	background-color:red;
	border-radius:50%;
   }
	.liu2{}
    .liu2 span{
	display: block;
	width:42px;
	height:42px;
	background-color:green;
	border-radius:50%;
   }
 .liu1 span:nth-child(1){
	transform: translate(20px,20px);
 }
 .liu1 span:nth-child(2){
	transform: translate(60px,-23px);
 } 
 .liu2 span:nth-child(1){
	transform: translate(20px,-8px);
 }
 .liu2 span:nth-child(2){
	transform: translate(20px,-9px);
 } 
	.liu2 span:nth-child(3){
	transform: translate(60px,-93px);
 }
 .liu2 span:nth-child(4){
	transform: translate(60px,-93px);
 } 
	
	.qi1{}
    .qi1 span{
	display: block;
	width:38px;
	height:38px;
	background-color:red;
	border-radius:50%;
   }
	.qi2{}
    .qi2 span{
	display: block;
	width:38px;
	height:38px;
	background-color:green;
	border-radius:50%;
   }
 .qi1 span:nth-child(1){
	transform: translate(3px,12px);
 }
 .qi1 span:nth-child(2){
	transform: translate(41px,-23px);
 } 
.qi1 span:nth-child(3){
	transform: translate(78px,-57px);
 } 
 .qi2 span:nth-child(1){
	transform: translate(23px,-35px);
 }
 .qi2 span:nth-child(2){
	transform: translate(23px,-35px);
 } 
	.qi2 span:nth-child(3){
	transform: translate(60px,-111px);
 }
 .qi2 span:nth-child(4){
	transform: translate(60px,-111px);
 } 
	.ba{}
    .ba span{
	display: block;
	width:38px;
	height:38px;
	background-color:black;
	border-radius:50%;
   }
	 .ba span:nth-child(1){
	transform: translate(15px,8px);
 }
    .ba span:nth-child(2){
	transform: translate(15px,10px);
 } 
	.ba span:nth-child(3){
	transform: translate(15px,12px);
 }
    .ba span:nth-child(4){
	transform: translate(15px,14px);
 } 
		 .ba span:nth-child(5){
	transform: translate(65px,-144px);
 }
    .ba span:nth-child(6){
	transform: translate(65px,-142px);
 } 
	.ba span:nth-child(7){
	transform: translate(65px,-140px);
 }
    .ba span:nth-child(8){
	transform: translate(65px,-138px);
 } 
	.jiu1{}
    .jiu1 span{
	display: block;
	width:38px;
	height:38px;
	background-color:blue;
	border-radius:50%;
   }
	.jiu2{}
    .jiu2 span{
	display: block;
	width:38px;
	height:38px;
	background-color:red;
	border-radius:50%;
   }
	.jiu3{}
    .jiu3 span{
	display: block;
	width:38px;
	height:38px;
	background-color:green;
	border-radius:50%;
   }
	 .jiu1 span:nth-child(1){
	transform: translate(3px,18px);
 }
    .jiu1 span:nth-child(2){
	transform: translate(41px,-20px);
 } 
	.jiu1 span:nth-child(3){
	transform: translate(79px,-58px)
 }
    .jiu2 span:nth-child(1){
	transform: translate(3px,-50px);
 } 
	.jiu2 span:nth-child(2){
	transform: translate(41px,-88px);
 }
    .jiu2 span:nth-child(3){
	transform: translate(79px,-126px);
 } 
	.jiu3 span:nth-child(1){
	transform: translate(3px,-120px);
 }
    .jiu3 span:nth-child(2){
	transform: translate(41px,-158px);
 } 
	.jiu3 span:nth-child(3){
	transform: translate(79px,-196px);
 } 
	</style>
</head>

<body>
	<div class="beijing">
		<div class="box">
			<div class="yi">
				<span></span>
		   </div>
		</div>
		<div class="box">
			<div class="er">
			<span></span> <span></span>
			   </div>
			</div>
		
		<div class="box">
			<div class="san1">
			<span></span> 
				</div>
				<div class="san2">
				<span></span> 
				 </div>
					<div class="san3">
				<span></span>
			   </div>
			</div>
		
		<div class="box">
			<div class="si1">
			<span></span> 
				</div>
				<div class="si2">
				<span></span> 
				 </div>
					<div class="si3">
				<span></span>
			   </div>
			<div class="si4">
				<span></span>
			   </div>
			</div>
	
		<div class="box">
			<div class="wu1">
			<span></span> 
				</div>
				<div class="wu2">
				<span></span> 
				 </div>
					<div class="wu3">
				<span></span>
			   </div>
			<div class="wu4">
				<span></span>
			   </div>
			<div class="wu5">
				<span></span>
			   </div>
			</div>
		
		<div class="box">
			<div class="liu1">
			<span></span> <span></span>
				</div>
				<div class="liu2">
				<span></span> <span > </span><span> </span> <span ></span>
				 </div>
			</div>
		
		<div class="box">
			<div class="qi1">
			<span></span> <span></span> <span></span> 
				</div>
				<div class="qi2">
				<span></span><span></span> <span></span> <span></span>  
				 </div>
			</div>
		
		<div class="box">
			<div class="ba">
			<span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> 
				</div>
			</div>
		
		<div class="box">
			<div class="jiu1">
			<span></span> <span></span> <span></span> 
				</div>
				<div class="jiu2">
				<span></span> <span></span> <span></span> 
				 </div>
					<div class="jiu3">
				<span></span><span></span> <span></span> 
			   </div>
			</div>
	</div>

   
	
	

</body>
</html>
